<!-- 顶部导航  -->
<template>
    <div class="vs-headerbar" style="width: 100%;">
        <el-header height="auto">
            <el-row type="flex" class="row-bg" justify="start">
                <el-menu :default-active="activeName" mode="horizontal" @select="handleMenuSelect">
                    <el-menu-item index="Home">Home</el-menu-item>
                    <el-menu-item index="Link">Link</el-menu-item>
                    <el-menu-item index="Design">Design</el-menu-item>
                    <el-menu-item index="Tool">Tool</el-menu-item>
                    <el-menu-item index="click">click</el-menu-item>
                </el-menu>
                <div class="select-box">
                    <el-autocomplete v-model="searchText" :fetch-suggestions="queryNameSearch" placeholder="Please enter name ..." @select="handleSearchTextSelect">
                        <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSearchTextSelect"> </i>
                        <template slot-scope="{ item }">
                            <div class="name">{{ item.name }}</div>
                        </template>
                    </el-autocomplete>
                </div>
            </el-row>
        </el-header>
    </div>
</template>
<script>
export default {
    name: 'vs-headerbar',
    data() {
        return {
            searchText: '',
            links: [],
        }
    },
    created() {
        document.title = '';
    },
    props: {
        'activeName': {
            type: String,
            default: 'Home',
        },
        'drawer': {
            type: Boolean,
            default: false,
        }
    },
    mounted() {
        this.$nextTick(function() {});
    },
    methods: {
        // 处理 菜单 选择
        handleMenuSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        // 处理 链接名称 搜索选择
        handleSearchTextSelect(key, keyPath) {
            this.searchText = key.name;
            console.log(key, keyPath);
        },
        // 链接名称 查询 搜索
        queryNameSearch(queryString, cb) {
            let links = this.links;
            let results = queryString ? links.filter(this.optionFilter(queryString, 'name')) : links;
            cb(results);
        },
        // 链接名称 数据选项 过滤器
        optionFilter(queryString, attribute) {
            return (item) => {
                return (item[attribute].toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            }
        },
    },
}

</script>
<style scoped></style>
